<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="../node_modules/vue/dist/vue.js"></script>

<div id="app">
    <ul>
        <li>西游记，价格{{xyjPrice}},数量：<input type="number" v-model="xyjNum"></li>
        <li>水浒传，价格{{shzPrice}},数量：<input type="number" v-model="shzNum"></li>
        <li>总价:{{totlePrice}}</li>
        {{msg}}
    </ul>
</div>

<script>
    new Vue({
        el:"#app",
        data:{
            xyjPrice: 99,
            shzPrice:99,
            xyjNum:1,
            shzNum:1,
            msg:''
        },
        //某些结果是基于之前的数据实时计算出来的，可以利用计算属性
        computed:{
            totlePrice(){
                return this.xyjPrice*this.xyjNum + this.shzPrice*this.shzNum
            }
        },
        // watch可以监控一个值得变化，从而做出反应
        watch:{
            xyjNum:function (newVal, oldVal) {
                console.log("newVal:"+newVal+"---" + "oldVal:"+oldVal)
                if(newVal >= 3){
                    this.msg = "超出库存"
                    this.xyjNum = 3
                } else {
                    this.msg = ""

                }
            }
        }
    })
</script>
</body>
</html>